<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>deploy详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
    <script src="/js/xkube.js?v=1" charset="utf-8"></script>
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="/js/echarts.min.js" charset="utf-8"></script>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/chartline.js" charset="utf-8"></script>

</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">

            <blockquote class="layui-elem-quote layui-text">
                节点详情页：
            </blockquote>

              <button class="layui-btn" id="EditYamlBtn">yaml查看</button>
              <button class="layui-btn layui-btn-danger" id="NodeDrain">节点排水</button>
              <button class="layui-btn layui-btn-danger" id="NodeUnschedulable">调度设置</button>
              <button class="layui-btn layui-btn-danger" id="NodeRemove">移除</button>
              <br><br>

      <div class="layui-collapse" lay-filter="test">
        <div class="layui-colla-item">
        <h2 class="layui-colla-title">基本信息</h2>
          <div class="layui-colla-content layui-show">
                  <table class="layui-table" lay-even="" lay-skin="nob" style="table-layout: fixed;">
                    <colgroup>
                      <col width="150">
                      <col width="450">
                      <col width="150">
                      <col>
                    </colgroup>
                    <tbody>
                      <tr>
                        <td>名称:</td>
                        <td><div id="nodeName"></div></td>
                        <td>创建时间:</td>
                        <td><div id="createTime"></div></td>
                      </tr>
                      <tr>
                        <td>调度状态:</td>
                        <td><div id="unschedulable"></div></td>
                        <td>容器组CIDR:</td>
                        <td><div id="podCIDR"></div></td>
                      </tr>
                      <tr>
                        <td>角色:</td>
                        <td><div id="nodeRole"></div></td>
                        <td>状态:</td>
                        <td><div id="nodeState"></div></td>
                      </tr>
                      <tr>
                        <td>架构:</td>
                        <td><div id="architecture"></div></td>
                        <td>启动ID:</td>
                        <td><div id="bootID"></div></td>
                      </tr>
                      <tr>
                        <td>容器版本:</td>
                        <td><div id="containerRuntimeVersion"></div></td>
                        <td>内核版本:</td>
                        <td><div id="kernelVersion"></div></td>
                      </tr>
                      <tr>
                        <td>kubeproxy版本:</td>
                        <td><div id="kubeProxyVersion"></div></td>
                        <td>kubelet版本:</td>
                        <td><div id="kubeletVersion"></div></td>
                      </tr>
                      <tr>
                        <td>机器ID:</td>
                        <td><div id="machineID"></div></td>
                        <td>操作系统:</td>
                        <td><div id="operatingSystem"></div></td>
                      </tr>
                      <tr>
                        <td>资源信息:</td>
                        <td><div id="allocatable"></div></td>
                        <td>污点:</td>
                        <td><div id="taints"></div></td>
                      </tr>
                      <tr>
                        <td>标签:</td>
                        <td style="overflow: ellipsis;word-break: break-word;"><div id="labels"></div></td>
                        <td>注解:</td>
                        <td style="overflow: ellipsis;word-break: break-word;"><div id="annotations"></div></td>
                      </tr>
                    </tbody>
                  </table>
          </div>
        </div>
      </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>已分配资源</legend>
            </fieldset>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>监控</legend>
            </fieldset>
            <div class="layui-row">
              <div class="layui-col-xs6">
                <div id="NodeMemDynamicLine" style="width:98%; height:250px;"></div>
              </div>
              <div class="layui-col-xs6">
                <div id="NodeCpuDynamicLine" style="width:98%; height:250px;"></div>
              </div>
            </div>  

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>状态</legend>
            </fieldset>
              <table class="layui-table" id="conditionsTableId" lay-filter="conditionsTableFilter"></table>

            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                <legend>容器组</legend>
            </fieldset>
              <table class="layui-table" id="currentTableId" lay-filter="currentTableFilter"></table>

	<!-- 弹出框 start-->   
  	<div class="layui-row" id="NodeUnschedulableTpl" style="display:none;">
    	<div class="layui-col-md11">
      		<form class="layui-form layui-form-pane" action="" lay-filter="unschedulableInfo" >
            <br>	
        		<div class="layui-form-item" style="margin-left:20px">
                <label class="layui-form-label">调度状态</label>
                <div class="layui-input-inline">
                    <input type="checkbox" name="unschedulable" lay-skin="switch" lay-filter="switchTest" lay-text="不可调度|可调度">                                                   
                </div>
        		</div>	
        		<div class="layui-form-item" style="margin-left:20px">
                <div class="layui-form-mid layui-word-aux"><span style="color:red">注意：您将修改该节点的调度状态，请确认是否进行修改？</span></div> 
        		</div>	
      		</form>
    	</div>
  	</div>
	<!-- 弹出框 end-->  

	<!-- 弹出框 start-->   
  	<div class="layui-row" id="NodeRemoveTpl" style="display:none;">
    	<div class="layui-col-md11">
      		<form class="layui-form layui-form-pane" action="" lay-filter="DeleteNodeInfo" >
        		<div class="layui-form-item" style="margin-left:20px">
                <div class="layui-form-mid layui-word-aux"><span style="color:red">确定移除该节点？</span></div> 
        		</div>	
        		<div class="layui-form-item" style="margin-top:10px;margin-left:10px">
              <div class="layui-input-inline">
                <input type="checkbox" name="isDrain" lay-skin="primary" title="是否排空节点" checked="">
              </div>
        		</div>	
        		<div class="layui-form-item" style="margin-left:10px">
                <div class="layui-form-mid layui-word-aux"><span style="color:red">注意：<br>
1.此操作可能会对业务产生影响，建议在业务低峰期进行。<br>
2.如果节点上存在 Pod，请选择“自动排空节点”，并确保集群资源充足，Pod 将自动迁移到其他节点。<br>
3.移除异常状态的节点请不要勾选“自动排空节点”，否则可能导致移除失败。<br>
</span></div> 
        		</div>	
            <br>			
        		<div class="layui-form-item">
                <div class="layui-input-block">
          			  <button class="layui-btn" lay-submit="" lay-filter="PodNumberSubmit">确定</button>
                </div>
        		</div>
      		</form>
    	</div>
  	</div>
	<!-- 弹出框 end-->  

    </div>
</div>
</body>
<script type="text/javascript">
    	$(document).ready(function(){
          dashboard.NodeDynamicLine();  
    	});		
</script>
<script type="text/html" id="limitKeyTpl">
  <div style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{{d.limit_key}}</div>
</script>

<script type="text/html" id="currentTableBar">
  {{#  var clusterId = getQueryString("clusterId"); }}
  {{#  if (clusterId == null) { }}
  {{#      clusterId = getCookie("clusterId") }}
  {{#  } }}
    <a href="javascript:;" layuimini-content-href="page/xkube/podDetail.html?clusterId={{clusterId}}&nameSpace={{d.nameSpace}}&podName={{d.podName}}" data-title="{{ d.podName }}详情" class="layui-btn layui-btn-sm">详情</a>
    <a class="layui-btn layui-btn-sm" lay-event="podLog">日志</a>
    <a class="layui-btn layui-btn-sm" lay-event="terminal">ssh终端</a>
    <a class="layui-btn layui-btn-normal layui-btn-sm layui-btn-danger" lay-event="delete">删除</a>
</script>
                
<script type="text/html" id="podPhaseTpl">
  {{# if ( d.podPhase == 'Running' ) { }}
     <span style="color:#218868">{{ d.podPhase}}</span>
  {{# } else if ( d.podPhase == 'Succeeded' ) { }}
     <span style="color:#1E9FFF">{{ d.podPhase}}</span>
	{{# } else { }}
    <span style="color:#FF5722">{{ d.podPhase}}</span>
{{# } }}
</script>        

<script type="text/html" id="toolbarDemo">
</script>
        
<script>

//设置默认集群
SetDefaultCluster();
var clusterId = getQueryString("clusterId");
if (clusterId == null) {
	clusterId = getCookie("clusterId")
}

//小于1.22版本,排水接口用betav1版本
var beta = 0;
var clusterIdVersion = getCookie(clusterId);
if ( compareVersions("1.22.0",clusterIdVersion) == 1 ) {
  beta = 1;
}

    layui.use(['form', 'table','miniTab'], function () {
        var $ = layui.jquery,
            form = layui.form,
            table = layui.table;
            miniTab = layui.miniTab,
            miniTab.listen();

    var nodeName = getQueryString("nodeName");
    $('#nodeName').html(nodeName);

      //deatail
			$.get('/xkube/node/v1/Detail' + location.search, function (resp) {
  				  if (resp.nodeName != '' ) {

                var nodeName = resp.nodeName;
                $('#nodeName').html(nodeName);

                var createTime = resp.createTime;
                $('#createTime').html(createTime);

                var nodeIp= resp.nodeIp;
                $('#nodeIp').html(nodeIp);

                var nodeRole = resp.nodeRole;
                $('#nodeRole').html(nodeRole);

                var nodeState = resp.nodeState;
                $('#nodeState').html(nodeState);

                var architecture = resp.architecture;
                $('#architecture').html(architecture);

                var bootID = resp.bootID;
                $('#bootID').html(bootID);

                var containerRuntimeVersion = resp.containerRuntimeVersion;
                $('#containerRuntimeVersion').html(containerRuntimeVersion);
				
                var kernelVersion= resp.kernelVersion;
                $('#kernelVersion').html(kernelVersion);

                var kubeProxyVersion = resp.kubeProxyVersion;
                $('#kubeProxyVersion').html(kubeProxyVersion);

                var kubeletVersion = resp.kubeletVersion;
                $('#kubeletVersion').html(kubeletVersion);

                var machineID = resp.machineID;
                $('#machineID').html(machineID);

                var operatingSystem = resp.operatingSystem;
                $('#operatingSystem').html(operatingSystem);

                var osImage = resp.osImage;
                $('#osImage').html(osImage);
				
                var systemUUID = resp.systemUUID;
                $('#systemUUID').html(systemUUID);
				
				        var podCIDR = resp.podCIDR;
                $('#podCIDR').html(podCIDR);
				
                var allocatable = resp.allocatable;
                $('#allocatable').html(allocatable);		

                var taints = resp.taints;
                $('#taints').html(taints);
				
                var unschedulable = resp.unschedulable;
                if (unschedulable == true) {
                  $('#unschedulable').html("不可调度");
                }else{
                  $('#unschedulable').html("可调度");
                }

                form.val('unschedulableInfo', {
                  "unschedulable": resp.unschedulable                        
                });
  
                var annotations = resp.annotations;
                $('#annotations').html(annotations);
  
                var labels = resp.labels;
                $('#labels').html(labels);
                
                //conditions
                table.render({
                    elem: '#conditionsTableId',
                    cols: [[
                        {field: 'ctype',width:200, title: '类型'},
                        {field: 'status', width:150,title: '状态'},
                        {field: 'lastTransitionTime',width:200, title: '最近更改'},      
                        {field: 'lastHertbeatTime',width:200, title: '最近心跳'}, 
                        {field: 'reason',title: '内容'},                          
                        {field: 'message',title: '消息'},
                    ]],
                    data: resp.conditions,
                    even: true
                });

          }else{
            layer.msg('请重新刷新',{icon:2});
          }
		  });

        $('#EditYamlBtn').on("click",function(){
                layer.open({
                    title: nodeName+'yaml编辑',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['50%', '90%'],
                    content: '/page/xkube/nodeYaml.html'+ location.search,
                });
        });

        //节点排水
        $('#NodeDrain').on("click",function(){
                layer.confirm('确认排空节点并设置为不可调度?:'+nodeName, {icon: 3, title:'排水提示',yes: function(index){
                     var index2 = layer.load(0, {shade: false});
                     layer.msg('此处需运行1-2s左右');
                			 $.ajax({
                			    url: '/xkube/node/v1/Drain?clusterId='+clusterId+"&nodeName="+nodeName+"&beta="+beta,
                			    type: "get",
                			    success: function (resp) {
                            layer.close(index2);
                						 if(resp.code == 0){
                							 layer.msg('排水成功', {icon: 1});
                						 }else{
                							 layer.msg(resp.msg,{icon:2});
                						 }
                				  }
                		   });		  	  
                },
            		  cancel: function(index, layero){ 
            			    layer.close(index);
                      layer.close(index2);
            			    console.log("不操作");
            		  } 
        		    }); 
        });

        //节点调度
        $('#NodeUnschedulable').on("click",function(){
            layer.open({
                title: '节点调度',
                skin:'layui-layer-rim',
                type: 1,
                shade: 0.2,
                //maxmin:true,
                shadeClose: true,
                area: ['400px', '200px'],
                content: $("#NodeUnschedulableTpl"),
            });
            form.render();
        });

        form.on('switch(switchTest)', function(data){
          //var bodystr = {"name":this.name,"value":this.checked};
          var bodystr = {"unschedulable":this.checked};
          //console.log(bodystr);
          layer.confirm('确认修改该节点调度设置:'+nodeName, {icon: 3, title:'调度设置',yes: function(index){
        			$.ajax({
        			   url: "/xkube/node/v1/Unschedulable" + location.search,
        			   headers:{'X-Requested-With':'XMLHttpRequest'},
                 type: "post",
                 data: JSON.stringify(bodystr),
                 dataType: "json",
        			   success: function (resp) {
        					  if (resp.code == 0 ) {
                      layer.msg('更改成功', {icon: 1});
                    }else{
                      layer.msg(resp.msg,{icon:2});
                    }
        				  }
        		    });
            },
    		    cancel: function(index, layero){ 
    			    layer.close(index);
    			    console.log("不操作");
    		    } 
		      }); 
        });


        //节点移除
        $('#NodeRemove').on("click",function(){
                layer.open({
                    title: '节点移除',
                    skin:'layui-layer-rim',
                    type: 1,
                    //shade: 0.2,
                    //maxmin:true,
                    shadeClose: true,
                    area: ['450px', '400px'],
                    content: $("#NodeRemoveTpl").html(),
                });
        });

       table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'terminal') {
                var index = layer.open({
                    title: data.podName+'终端',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['50%', '80%'],
                    content: '/page/xkube/podTerminal.html?clusterId='+clusterId+"&nameSpace="+data.nameSpace +"&podName="+data.podName,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }else if (obj.event === 'podLog') {
                var index = layer.open({
                    title: data.podName+'日志',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['60%', '90%'],
                    content: '/page/xkube/podLog.html?clusterId='+clusterId+"&nameSpace="+data.nameSpace +"&podName="+data.podName,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;              
            }else if (obj.event === 'delete') {
                layer.confirm('确定删除'+data.podName+'?', {icon: 3, title:'删除提示',yes: function(index){
                     var index2 = layer.load(0, {shade: false});
                     layer.msg('此处需运行1-2s左右');
                			 $.ajax({
                			    url: '/xkube/pod/v1/Del?clusterId='+clusterId+"&nameSpace="+data.nameSpace +"&podName="+data.podName,
                			    type: "get",
                			    success: function (resp) {
                            layer.close(index2);
                						 if(resp.code == 0){
                							 layer.msg('删除成功', {icon: 1});
                							 //window.location.reload();
                							 obj.del();
                						 }else{
                							 layer.msg(resp.msg,{icon:2});
                						 }
                				  }
                		   });		  	  
                },
            		  cancel: function(index, layero){ 
            			    layer.close(index);
                      layer.close(index2);
            			    console.log("不操作");
            		  } 
        		    });                
            }
        });

        table.render({
            elem: '#currentTableId',
            url: '/xkube/pod/v1/List' + location.search,
            toolbar: '#toolbarDemo',
            //editTrigger: 'dblclick',
            defaultToolbar: ['filter', 'exports'],
            cols: [[
                {field: 'podName',title: '名称',sort: true},
                {field: 'imgUrl', title: '镜像',hide:true},
                {field: 'podPhase', title: '状态',width:120,sort: true,templet: '#podPhaseTpl'},      
                {field: 'nameSpace', width: 120, title: '命名空间', sort: true},
                {field: 'restartCount',width:80,title: '重启',sort: true},                          
                {field: 'podIp',title: 'podIp',width:120,sort: true},
                {field: 'hostIp',width:120,title:'节点IP',hide:true}, 
                //{field: 'resUsage', width:220,title: '资源使用'}, 
                {field: 'memUsage',sort: true,width:120,title:'内存[MB]'},
                {field: 'cpuUsage',sort: true,width:120,title:'CPU[核]<i class="layui-icon layui-icon-about resUsed-marks" style="color: #1E9FFF;"></i>'},              
                {field: 'resUsage',hide:true,width:240,title: '资源使用'},  
                {field: 'nodeName',title:'节点名称',edit:true,hide:true},    
                {field: 'labes', width: 250, title: '标签',edit:true,hide:true, sort: true,templet: '#TagTpl'},           
                {field: 'createTime',width:160, title: '创建时间'},
                {title: '操作', minWidth:260, toolbar: '#currentTableBar', align: "center"}
            ]],
            limits: [50, 100, 200],
            limit: 50,
            page: false,
            done(){
                $(".resUsed-marks").mouseover(function() {
                  layer.tips('需k8s安装了metrics-server才支持!', this, {
                    tips: [1, "#000"],
                    time:3000
                  });
                });
            }
        });
    });
</script>

</html>